<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>	
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<style>
			#imgs img {
				width: 90px;
				height: 100px;
			}

			#shops {
				margin-top: 10px;
			}
			#cart-null{
				    margin-top: 235px;
					margin-left: 176px;
			}
			#shop-cart-text{
				color: #ebedf0;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<header>
				
				<van-nav-bar
					title="购物车"
					right-text="清空购物车" 					
					@click-right="onClickRight">					
				</van-nav-bar>
			</header>

			<section id="imgs">
				<div id="cart-null" v-show="isShow">
					<van-icon name="shopping-cart-o" color="#ebedf0" size="50px"></van-icon>
					<div id="shop-cart-text">购物车空空如也</div>
				</div>
				<ul v-show="isShow==false" v-for="pl in cartList">
					<li  :id="pl.GoodsTypeId">
						<van-row id="shops">
							<van-col span="2" style="margin-top: 40px;margin-left: 10px;">
								<van-checkbox v-model="pl.checked"></van-checkbox>
							</van-col>
							<van-col span="6">
								<img :src="pl.CoverImage" onerror="javascript:this.src='../img/product_default.jpg';onerror=null; " />
								
							</van-col>
							<van-col span="15">
								<van-row>
									<van-col span="24">
										<van-card :num="pl.num" style="height: 65px;" :price="pl.RealPrice" :title="pl.Name" />
									</van-col>
								</van-row>
								<van-row>
									<van-col span="12" offset="8">
										<van-stepper v-model="pl.num" @plus="add(pl.GoodsTypeId,pl.num++)" @minus="minus(pl.num--)"></van-stepper>
									</van-col>

									<van-col span="2">
										<button @click="ChDelete(pl.Id)">
											<van-icon name="delete" style="padding: 1px;font-size:20px;" />
										</button>
									</van-col>

								</van-row>

								</van-card>
							</van-col>
						</van-row>
					</li>
					
				</ul>
			</section>

			<footer>
				<van-submit-bar :price="ZongJia*100" button-text="提交订单" @submit="onSubmit" >
					
				</van-submit-bar>				
			</footer>
			
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					key:"",
					isShow:false,
					cartList:[

					]
					
				},
				mounted(){
					var _this=this;	
					_this.key=localStorage.getItem("keys")
					if(_this.key == null){
						  plus.webview.create("../presoanl/login.html","login");
						  plus.webview.show("login","slide-in-right")
					}
					for(var i=1;i<12;i++){
						if(localStorage.getItem(i)){
							_this.cartList.push(JSON.parse(localStorage.getItem(i))); //获取购物车数据
							console.log(JSON.parse(localStorage.getItem(i)));													
												
						}
					}
				},
				computed:{
					ZongJia:function(){
						var money=0;
						for(var i=0;i<this.cartList.length;i++){
							if(this.cartList[i].checked==true){
								money+=this.cartList[i].num*this.cartList[i].RealPrice;
							}
						}
						return money;
					}
				},
				methods: {
					onSubmit(){						
						plus.webview.create("../commodity-details/payment.html","pay");
						plus.webview.show("pay","slide-in-right")
					},
					onClickRight: function() {
						this.$dialog.confirm({
							title: '是否清空购物车',
							message: ''
						}).then(() => {
							for(var i=0;i<this.cartList.length;i++){
								localStorage.removeItem(this.cartList[i].Id);
								this.cartList.splice(this.cartList.map(item => item.Id).lastIndexOf(this.cartList[i].Id),1);
							}
						}).catch(() => {
							// on cancel
						});
					},
					ChDelete: function(i) {						
						this.$dialog.confirm({
							message:"确认删除商品"
						}).then(() => { 
							localStorage.removeItem(i);
							this.cartList.splice(this.cartList.map(item => item.Id).lastIndexOf(i),1);
						}).catch(() => {
							// on cancel
						});						
					}

				}

			})
		</script>		
	</body>

</html>

